<template>
<div>
   <Breadcrumb></Breadcrumb>
  <div class="category-container">
   
    <h3>产品类目管理</h3>
    <el-button type="warning" round @click="addLevelOneCategory">新增一级导航类目</el-button>
    <div class="custom-tree-container">
      <div class="block">
        <el-tree
          :data="data"
          show-checkbox
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
          :props="defaultProps"
          :render-content="renderContent">
        </el-tree>
      </div>
    </div>
    <Dialog ref="dialog" :info="info"></Dialog>
  </div>
</div>

</template>
<script>
import Dialog from './Dialog'
export default {
  components:{
    Dialog
  },
    data() {
      const data = [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
        }]
      }];
      return {
        data: JSON.parse(JSON.stringify(data)),
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        info:{
          dialogTitle:'',
          type:0,
          id:'',
        }
      }
    },
    created(){
      this.getitemCategory();
    },
    methods: {
      async getitemCategory(){
        let res=await this.$api.getitemCategory();
        // console.log(res);
        if(res.data.status===200){
          let result=res.data.result;
          let rootArr=[],childArr=[];
          result.forEach((ele)=>{
            if(ele.type===1){
              rootArr.push(ele);
            }else{
              childArr.push(ele);
            }
          })
          rootArr.forEach((item)=>{
            item.children=[];
            childArr.forEach((ele)=>{
              if(ele.type===item.cid){
                item.children.push(ele);
              }
            })
          })
          this.data=rootArr;
        }
      },
      addLevelOneCategory(){
        let dialogTitle='新增一级分类名称';
        this.info['dialogTitle']=dialogTitle;
        this.info['type']=3;
        this.$refs.dialog.input='';
        this.$refs.dialog.dialogVisible=true;
        this.$refs.dialog.action=false;
      },
      append(data) {
        console.log(data);
        let dialogTitle=`新增${data.name}分类子类名称`;
        this.info['dialogTitle']=dialogTitle;
        this.info['type']=1;
        this.info['id']=data.cid;
        this.$refs.dialog.input='';
        this.$refs.dialog.dialogVisible=true;
        this.$refs.dialog.action=false;
        // const newChild = { id: id++, label: 'testtest', children: [] };
        // if (!data.children) {
        //   this.$set(data, 'children', []);
        // }
        // data.children.push(newChild);
      },

      remove(node, data) {

        this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            console.log('$$$$$',data);
            this.$api.deleteContentCategoryById({id:data.id}).then((res)=>{
              console.log('****',res);
               this.getitemCategory();
              if(res.data.status===200){
               this.$message({
                type: 'success',
                message: '删除成功!'
            });
          }
            });
            }).catch((e) => {
            console.log(e);
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
       

        // let dialogTitle=`删除${data.name}分类`;
        // this.info['dialogTitle']=dialogTitle;
        // this.info['type']=2;
        // this.$refs.dialog.input='';
        // this.$refs.dialog.dialogVisible=true;
        // this.$refs.dialog.action=true;
        // const parent = node.parent;
        // const children = parent.data.children || parent.data;
        // const index = children.findIndex(d => d.id === data.id);
        // children.splice(index, 1);
      },
      update(node,data){
        let dialogTitle=`修改${data.name}分类名称`;
        this.info['dialogTitle']=dialogTitle;
        this.info['type']=2;
        this.info['id']=data.id;
        this.$refs.dialog.input=data.name;
        console.log('----',this.info);
        this.$refs.dialog.dialogVisible=true;
        this.$refs.dialog.action=false;
      },

      renderContent(h, { node, data, store }) {
        let fill=(<span></span>)
        if(node.level==1){
          fill=(<el-button size="mini" type="primary" icon="el-icon-document-add" on-click={ () => this.append(data) }>新增</el-button>)
        }
        let html= (
          <span class="custom-tree-node">
            <span class="labeltext">{node.label}</span><span style="display:inline-block">
              {fill}
              <el-button size="mini" type="warning" icon="el-icon-delete"  on-click={ () => this.remove(node, data) }>删除</el-button>
              <el-button size="mini" type="success" icon="el-icon-edit" on-click={ () => this.update(node, data) }>修改</el-button>
            </span>
          </span>
          );
        return html
      }
    }
  };
</script>


<style lang="less" scoped>
  .category-container{
    background-color: #fff;
    margin:15px;
    padding:10px;
    min-width: 800px;
    min-height: 100px;
    h3{
      background-color: #ccc;
      font-size:16px;
      padding-left:10px;
      line-height:48px;
    }
    .el-button{
      margin: 10px 0;
    }
    

    
  }
   /deep/ .mini {
      padding: 4px 10px;
      font-size: 14px;
    }
    /deep/ .el-tree-node__content {
      margin-bottom: 10px;
    }
    /deep/ .labeltext {
      width: 300px;
      display: inline-block;
    }


</style>